<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        #inputEmail4 {
            width: 80%;
            display: inline-block;
        }
        
        tbody tr td {
            width: 25%;
            text-align: center;
        }
        
        tbody tr td {
            background-color: #fff !important;
        }
        
        thead tr th {
            height: 42px;
            text-align: center;
            background-color: #eeeeee;
        }
    </style>
</head>
<div id="app" class="container">
    <div>
        <input type="text" v-model="tel" class="form-control" id="inputEmail4" placeholder="请输入图书名称">
        <button class="btn btn-danger" @click="add">提交</button>
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>id</th>
                    <th>书名</th>
                    <th>添加时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 2.遍历数据  -->
                <tr v-for="(item,index) in arr" :class="[index%2==0?'success':'info']">
                    <td>{{index+1}}</td>
                    <td>{{item.tel}}</td>
                    <td>{{item.time}}</td>
                    <td>
                        <button class="btn btn-danger" @click="del(index)">删除</button>
                    </td>
                </tr>
                <!-- 3.条件渲染 -->
                <tr v-if="arr.length===0">
                    <td colspan="5" class="text-center">暂无数据</td>
                </tr>
                <tr v-else>
                    <td colspan="5" class="text-center">

                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<body>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            arr: [],
            name: "",
            tel: ""
        },

        methods: {
            reset() {
                this.name = ""
                this.tel = ""
            },
            add() {
                if (!inputEmail4.value) {
                    alert("不能为空");
                    return;
                }
                this.arr.push({

                        name: this.name,
                        tel: this.tel,
                        time: new Date().toLocaleDateString() + " "
                    })
                    //表单数据清空
                this.reset()
            },
            // 8.删除
            del(index) {
                this.arr.splice(index, 1)
            },


        }
    })
</script>

</html>